<template>
  <div class="detailsContainer">
    <!-- 顶部导航栏 -->
    <div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="基本信息" name="first">
          <!-- 表单主体 -->
          <div class="baseForm">
            <el-form ref="baseInfoForm" :model="baseInfo" label-position="left" label-width="80px" class="el-form" :rules="baseInfoRules">
              <el-form-item label="车辆编号" prop="truckTypeId">
                <span v-if="isEdit === false">{{ baseInfo.truckTypeId }}</span>
                <el-input v-else v-model.number="baseInfo.truckTypeId" />
              </el-form-item>
              <el-form-item label="车牌号码" prop="licensePlate">
                <span v-if="isEdit === false">{{ baseInfo.licensePlate }}</span>
                <el-input v-else v-model="baseInfo.licensePlate" />
              </el-form-item>
              <el-form-item label="车型名称" prop="truckTypeName">
                <span v-if="isEdit === false">{{ baseInfo.truckTypeName }}</span>
                <el-input v-else v-model="baseInfo.truckTypeName" />
              </el-form-item>
              <el-form-item label="车辆体积" prop="allowableVolume">
                <span v-if="isEdit === false">{{ baseInfo.allowableVolume }} m³</span>
                <el-input v-else v-model.number="baseInfo.allowableVolume">
                  <template slot="suffix">m³</template>
                </el-input>
              </el-form-item>
              <el-form-item label="车辆载重" prop="allowableLoad">
                <span v-if="isEdit === false">{{ baseInfo.allowableLoad }} 吨</span>
                <el-input v-else v-model.number="baseInfo.allowableLoad">
                  <template slot="suffix">吨</template>
                </el-input>
              </el-form-item>
              <el-form-item label="GPSID" prop="deviceGpsId">
                <span v-if="isEdit === false">{{ baseInfo.deviceGpsId }}</span>
                <el-input v-else v-model="baseInfo.deviceGpsId" />
              </el-form-item>
              <el-form-item label="图片信息" style="">
                <el-upload
                  style="width: 800px; height:300px"
                  :file-list="fileList"
                  action=""
                  list-type="picture-card"
                  :auto-upload="true"
                  :http-request="onUpload"
                  :before-upload="beforeUpload"
                >
                  <i slot="default" class="el-icon-plus" />
                  <div slot="file" slot-scope="{file}">
                    <img
                      class="el-upload-list__item-thumbnail"
                      :src="file.url"
                      alt=""
                    >
                    <span class="el-upload-list__item-actions">
                      <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                      >
                        <i class="el-icon-zoom-in" />
                      </span>
                      <span
                        v-if="isEdit === true"
                        class="el-upload-list__item-delete"
                        @click="handleRemove(file)"
                      >
                        <i class="el-icon-delete" />
                      </span>
                    </span>
                  </div>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="驾驶证信息" name="second">
          驾驶证信息
        </el-tab-pane>

      </el-tabs>
    </div>

    <!-- 底部 -->
    <div class="footer">
      <el-button v-if="isEdit === false" type="warning" @click="editList">编辑</el-button>
      <div v-else>
        <el-button type="warning" @click="savEdit">保存</el-button>
        <el-button type="warning" @click="cancalEdit">取消</el-button>
      </div>

    </div>
  </div>

</template>

<script>
import { getDriverInfo, updateDriverInfo, uploadImg } from '@/api/vehicleDeatils'
export default {
  data() {
    return {
      isEdit: false, // ? 判断编辑还是查看
      activeName: 'first', // 控制默认导航栏显示
      baseInfo: {
        truckTypeId: '', // 车辆编号
        licensePlate: '', // 车牌号码
        truckTypeName: '', // 车型名称
        allowableVolume: '', // 车辆体积
        allowableLoad: '', // 车辆载重
        deviceGpsId: '', // GPSID
        picture: '', // 图片信息
        id: '' // 车辆id
      },
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      fileList: [],
      baseInfoRules: {
        truckTypeId: [{ required: true, message: '请输入车辆编号', trigger: 'blur' }],
        licensePlate: [{ required: true, message: '请输入车牌号码', trigger: 'blur' }],
        truckTypeName: [{ required: true, message: '请输入车型名称', trigger: 'blur' }],
        allowableVolume: [{ required: true, message: '请输入车辆体积', trigger: 'blur' }],
        allowableLoad: [{ required: true, message: '请输入车辆载重', trigger: 'blur' }],
        deviceGpsId: [{ required: true, message: '请选择GPSID', trigger: 'blur' }]

      }
    }
  },
  created() {
    this.getDriverBaseInfo()
  },
  methods: {
    // 回显数据
    async getDriverBaseInfo() {
      this.baseInfo.id = this.$route.query.id
      const res = await getDriverInfo(this.$route.query.id)
      console.log(res)
      this.baseInfo = res.data
      if (res.data.picture) {
        const linksArray = res.data.picture.split(',').map(link => link.trim())
        this.fileList = linksArray.map(link => ({ url: link }))
      }
    },
    // 点击编辑按钮时
    editList() {
      this.isEdit = true
    },
    // 取消编辑
    cancalEdit() {
      this.isEdit = false
      this.getDriverBaseInfo()
    },
    //  todo 保存编辑
    async savEdit() {
      // 校验表单
      this.$refs.baseInfoForm.validate()
      // 传接口
      const res = await updateDriverInfo(this.baseInfo)
      console.log(res)
      // 提示成功
      this.$message.success('保存成功')
      this.isEdit = false
      this.getDriverBaseInfo()
    },
    // ! 下面都是图片头像的操作
    // 图片上传前的校验
    beforeUpload(file) {
      const list = ['image/jpeg', 'image/png', 'image/jpg']
      const isJPG = list.includes(file.type)
      const isLt5M = file.size / 1024 / 1024 < 5 // 5M
      const fileList = this.fileList

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG PNG  JEPG 格式!')
        return false
      }
      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
        return true
      }
      if (fileList.length === 2) {
        this.$message.error('最多上传2张照片!')
        return false
      }
      return isJPG && isLt5M
    },
    // 上传
    async onUpload(file) {
      // console.log(file)
      const formData = new FormData()
      formData.append('file', file.file)
      const res = await uploadImg(formData)
      const picture2Obj = {
        url: res.data
      }
      this.fileList.push(picture2Obj)
      console.log(this.fileList)
      const pic1 = this.fileList[0].url
      const pic2 = this.fileList[1].url
      // 把返回的图片地址添加到baseInfo中的picture属性
      this.baseInfo.picture = pic1 + ',' + pic2
      console.log(this.baseInfo.picture)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      console.log(file)
      this.dialogVisible = true
    },
    handleDownload(file) {
      console.log(file)
    }
  }

}
</script>

<style>
 .el-tabs__header{
  padding-left: 86px;
  padding-top: 20px;
  padding-right: 86px;

 }
 .aside-item{
font-size: 16px;
  color: #20232a;
 }
.detailsContainer{
  margin-left: 20px;
    margin-right: 20px;
    background-color: #ffffff;
    height: 718px;
}
.baseForm{
  /* width: 1116px; */
  height: 547px;
  background-color: #ffffff;
  padding-top: 53px;
}
.el-input{
  width: 215px;
}
.el-form{
  display: flex;
  padding: 0 26px 0 26px;
  margin-left: 46px;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.el-form-item__content{
  width: 351px;
  height: 41px;
}
.footer{
  text-align: center;
  padding-top: 30px;
  border-top: 1px solid #cfcfcf;
}
</style>
